<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="icon" type="image/x-icon" href="https://www.opposhop.cn/cn/web/favicon.ico" />
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/detail.css">
    <link rel="stylesheet" href="../fonts/iconfont/iconfont.css">
    <script src="../fonts/iconfont/iconfont.js"></script>
    <script src="../lib/jquery/jquery.min.js"></script>
    <script src="../js/list_js/goods.js"></script>
</head>
<body>
    <header class="pos-f">
        <div class="head_top_wrap head_top_unload">
            <div class=" head_top w clearfix">
                <ul class="head_top_left fl">
                    <li><a href="javascript:void(0);">OPPO 官网</a></li>
                    <li><a href="javascript:void(0);">一加官网</a></li>
                </ul>
                <ul class="head_top_right fr">
                    <li class="down pos_r">
                        <a href="javascript:void(0);">下载 OPPO 商城 App</a>
                        <div class="ewm pos-a">
                            <img src="../images/img_home/qrcode-ewm.jpg">
                            <p>扫描下载 OPPO 商城 App</p>
                        </div>
                    </li>
                    <li class="line">|</li>
                    <li>
                        <i class="iconfont icon-denglu-copy"></i>
                        <a href="../views/login.html">登录</a>
                    </li>
                    <li class="line">|</li>
                    <li>
                        <a href="../views/register.html">注册</a>
                    </li>
                    <li class="line">|</li>
                    <li>
                        <i class="iconfont icon-shouye"></i>
                        <a href="../views/cart.html">购物车</a>
                        <span class="num">（0）</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="head_top_wrap head_top_loading">
            <div class="head-top w clearfix">
                <ul class="head_top_left fl">
                    <li><a href="javascript:void(0);">OPPO 官网</a></li>
                    <li><a href="javascript:void(0);">一加官网</a></li>
                </ul>
                <ul class="head_top_right fr">
                    <li class="down pos-r">
                        <a href="javascript:void(0);">下载 OPPO 商城 App</a>
                        <div class="ewm pos-a">
                            <img src="../images/img_home/qrcode-ewm.jpg">
                            <p>扫描下载 OPPO 商城 App</p>
                        </div>
                    </li>
                    <li class="line">|</li>
                    <li>
                        <i class="iconfont icon-denglu-copy"></i>
                        <a href="javascript:void(0);">用户&nbsp;<span class="username"></span></a>
                    </li>
                    <li class="line">|</li>
                    <li>
                        <a href="javascript:void(0);">我的订单</a>
                    </li>
                    <li class="line">|</li>
                    <li>
                        <a href="../views/home.html" class="quit">退出</a>
                    </li>
                    <li class="line">|</li>
                    <li>
                        <i class="iconfont icon-shouye"></i>
                        <a href="../shopcar/shopcar.html">购物车</a>
                        <span>(<span class="num">0</span>)</span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- header的nav部分 -->
        <div class="head_nav_wrap">
            <div class="head_nav w clearfix">
                <div class="head_nav_left fl clearfix">
                    <a class="head_nav_log fl" href="../views/home.html">
                        <img src="../images/img_home/head-nav-logo.png">
                    </a>
                    <ul class="fl clearfix">
                        <li><a href="javascript:void(0);">OPPO专区</a></li>
                        <li><a href="javascript:void(0);">OnePlus专区</a></li>
                        <li><a href="javascript:void(0);">realme专区</a></li>
                        <li><a href="javascript:void(0);">智能硬件</a></li>
                        <li><a href="javascript:void(0);">潮流好物</a></li>
                        <li><a href="javascript:void(0);">服务</a></li>
                    </ul>
                </div>
                <div class="head_nav_right pos-r fr">
                    <input type="text" placeholder="OPPO Reno7">
                    <i class="iconfont icon-fangdajing1 pos-a"></i>
                </div>
            </div>
        </div>
    </header>


    <section>
        <div class="sec-con-wrap w clearfix">
            <div class="sec-left-wrap fl">
                <div class="sec-left pos-r">
                    <div class="middleImg">
                        <img src="" class="need"/>
                        <div class="middleArea pos-a"></div>
                    </div>
                    <div class="small clearfix">
                        <div class="arr left-arr fl">&lt;</div>
                        <div class="small-list fl pos-r">
                            <ul class="pos-a">
                                <li><img src=""class="need2" /></li>
                            </ul>
                        </div>    
                        <div class="arr right-arr fl">&gt;</div>      
                    </div>
                    <div class="bigArea pos-a">
                        <img class="bigImg pos-a need3" src="" />
                    </div>
                </div>
                <div class="mt-15">
                    <div class="btn-modelComparison fl">
                        <span class="v-btn_content">
                            <img src="https://dsfs.oppo.com/archives/202111/20211123021118619c8eb2c8b64.png?_w_=60&_h_=60" class="img-model">
                            <span class="btn-desc">商品对比</span>
                        </span>
                    </div>
                    <div class="btn-modelComparison fl">
                        <span class="v-btn_content">
                            <img src="https://dsfs.oppo.com/archives/202111/20211123021134619c8efe1da05.png?_w_=60&_h_=60" class="img-model">
                            <span class="btn-desc">360° 探索</span>
                        </span>
                    </div>
                </div>
            </div>

            <div class="sec-right-wrap fr">
                <div class="sec-right">
                    <h2 class="tit">OPPO Reno7 Pro </h2>
                    <div class="sale-tag-box clearfix" >
                        <div class="mb-3">
                            <div class="item">
                                <div class="tag">OPPO手机10元优惠券 | 满700元可用</div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="item">
                                <div class="tag">24期免息</div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="item">
                                <div class="tag">积分可抵200元</div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="item">
                                <div class="tag">购物送积分</div>
                            </div>
                        </div>
                        <div class="detail-btn">
                            <span>详情&nbsp;&gt;</span>
                        </div>
                    </div>
                    <div class="sale-text">
                        <div class="product-text">
                            <div class="tit-list">
                                <p class="orange">【OPPO官方商城】</p>
                                ①【人像视频大师】前置索尼IMX709超感光猫眼镜头；
                                <br>
                                ②【光刻工艺】航天级星雨光刻工艺；
                                <br>
                                ③【轻薄长续航】7.45mm轻薄机身，4500mAh大电池；
                                <br>
                                ④【直边中框】航空铝直边金属中框；
                                <br>
                                ⑤【超级闪充】65W超级闪充。
                                <br>
                                <a href="" class="orange" target="_blank">
                                    以旧换新至高补贴1300元>>>>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="sale-price">
                        <span style="font-size: 24px;" >¥</span><span class="price1">3999</span>
                    </div>
                    <div class="parameter-swiper-container">
                        <div class="swiper-wrapper clearfix" style="transform: translate3d(0px, 0px, 0px);">
                            <!-- <div class="swiper-slide">
                                <div class="itemr">
                                    <img src="https://dsfs.oppo.com/archives/202111/20211125071119619f729f1e498.png?_w_=72&_h_=72&x-oss-process=image/format,webp" width="32" height="32">
                                    <div class="name">摄像头</div>
                                    <div class="attr">5000W主摄像头</div>
                                </div>
                            </div>
                            <div class="swiper-slide" style="width: 120px;">
                                <div class="itemr">
                                    <img src="https://dsfs.oppo.com/archives/202111/20211125071106619f730a58c8d.png?_w_=72&_h_=72&x-oss-process=image/format,webp" width="32" height="32">
                                    <div class="name">处理器</div>
                                    <div class="attr">天玑1200-MAX </div>
                                </div>
                            </div>
                            <div class="swiper-slide" style="width: 120px;">
                                <div class="itemr">
                                    <img src="https://dsfs.oppo.com/archives/202111/20211125071141619f732d8dce7.png?_w_=72&_h_=72&x-oss-process=image/format,webp" width="32" height="32">
                                    <div class="name">充电</div>
                                    <div class="attr">65W超级闪充 </div>
                                </div>
                            </div>
                            <div class="swiper-slide" style="width: 120px;">
                                <div class="itemr">
                                    <img src="https://dsfs.oppo.com/archives/202111/20211125071101619f73f57d4aa.png?_w_=72&_h_=72&x-oss-process=image/format,webp" width="32" height="32">
                                    <div class="name">运营商网络</div>
                                    <div class="attr">5G全网通 </div>
                                </div>
                            </div> -->
                        </div>
                    </div>
                    
                    <div>
                        <!-- <div class="item-group theme-light">
                            <div class="item-title">配置</div>
                            <div class="row sku-box clearfix">
                                <div class="col">
                                    <div class="btn btn-block btn-outlined btn-disabled " style="height: 60px;">
                                        <div class="btn-content">
                                            <div class="text-truncate" style="width: 100%;">英雄联盟手游限定版</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="btn btn-block btn-outlined" style="height: 60px;">
                                        <div class="btn-content">
                                            <div class="text-truncate" style="width: 100%;">8G+256G</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="btn btn-block btn-outlined btn-active" style="height: 60px;">
                                        <div class="btn-content">
                                            <div class="text-truncate" style="width: 100%;">12G+256G</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                        <!-- <div class="item-group theme-light">
                            <div class="item-title">颜色</div>
                            <div class="row sku-box clearfix">
                                <div class="col">
                                    <div class="btn btn-block btn-outlined" style="height: 60px;">
                                        <div class="btn-content">
                                            <div class="text-truncate" style="width: 100%;">红丝绒</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="btn btn-block btn-outlined btn-disabled" style="height: 60px;">
                                        <div class="btn-content">
                                            <div class="text-truncate" style="width: 100%;">星雨心愿</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="btn btn-block btn-outlined btn-active" style="height: 60px;">
                                        <div class="btn-content">
                                            <div class="text-truncate" style="width: 100%;">暮雪金</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="btn btn-block btn-outlined" style="height: 60px;">
                                        <div class="btn-content">
                                            <div class="text-truncate" style="width: 100%;">星夜黑</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                        <div class="item-group theme-light">
                            <div class="item-title">选择套餐</div>
                            <div class="row sku-box clearfix">
                                <div class="col">
                                    <div class="btn btn-block btn-outlined btn-active" style="height: 60px;">
                                        <div class="btn-content">
                                            <div class="text-truncate" style="width: 100%;">官方标配</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="btn btn-block btn-outlined btn-disabled" style="height: 60px;">
                                        <div class="btn-content">
                                            <div class="text-truncate" style="width: 100%;">流星宝藏礼盒套餐</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="item-title">数量</div>
                        <div>
                            <div class="input-number-box clearfix">
                                <div class="num-btn del-btn fl">
                                    <span>-</span>
                                </div>
                                <input class="num-input fl" type="text" max="5" value="1">
                                <div class="num-btn add-btn fl">
                                    <span>+</span>
                                </div>
                                <div class="purchase-limit fl">仅限购5件</div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
        <div class="w">
            <hr class="split-line" style="background-color: #000; opacity: 0.3;">
            <div>
                <div class="buy-box w clearfix">
                    <div class="buy-box-left fl">
                        <div class="price">
                            <span class="price">¥3999.00</span>
                        </div>
                        <!-- <div class="txt">已选:<span>12G+256G</span> | <span>暮雪金</span> | <span>官方标配</span> | <span>1</span>件</div> -->
                    </div>
                    <div class="buy-box-right fr">
                        <span class="sub-btn">加入购物车</span>
                        <a href="" class="buy-btn">立即购买</a>
                    </div>
                </div>
                <div>
                    <div class="guarantee-tags">
                        <div class="mr-6">
                            <img src="https://dsfs.oppo.com/oppo/shop-pc-v2/main/img/4ef9708.svg" height="18px" width="18px">
                            <div class="ml-1">7天保价</div>
                        </div>
                        <div class="mr-6">
                            <img src="https://dsfs.oppo.com/oppo/shop-pc-v2/main/img/4ef9708.svg" height="18px" width="18px">
                            <div class="ml-1">官方正品</div>
                        </div>
                        <div class="mr-6">
                            <img src="https://dsfs.oppo.com/oppo/shop-pc-v2/main/img/4ef9708.svg" height="18px" width="18px">
                            <div class="ml-1">顺丰包邮</div>
                        </div>
                        <div class="mr-6">
                            <img src="https://dsfs.oppo.com/oppo/shop-pc-v2/main/img/4ef9708.svg" height="18px" width="18px">
                            <div class="ml-1">全国联保</div>
                        </div>
                        <div class="mr-6">
                            <img src="https://dsfs.oppo.com/oppo/shop-pc-v2/main/img/4ef9708.svg" height="18px" width="18px">
                            <div class="ml-1">官方发货&售后</div>
                        </div>
                        <div class="mr-6">
                            <img src="https://dsfs.oppo.com/oppo/shop-pc-v2/main/img/4ef9708.svg" height="18px" width="18px">
                            <div class="t1 ml-1">7天无理由退换货</div>
                        </div>
                    </div>
                </div>
        </div>
        
    </section>
    <script src="../js/detail_js/detail.js"></script>
</body>
</html>